// 这个文件是webpack的配置文件

// webpack的配置文件是基于NodeJs的，所以这个文件的模块化要使用CommonJs规范
const path = require("path");

// 插件和转换器都需要安装，插件是需要引入才能用的
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // mode表示的是模式
  // production 或者 development
  mode: "production",

  // entry表示的是项目的入口文件的地址
  // 默认值是src/index.js
  entry: "./src/index.js",

  // output表示的是项目打包的出口
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },

  // webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
  // loader需要使用module选项
  module: {
    // 转换规则
    // 每一个对象表示的是一个规则
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  // loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
  // 插件需要用plugins选项
  // 数组里面的每一项就是一个插件
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/public/index.html"),
    }),
  ],

  // 静态服务器的配置
  devServer: {
    port: 8080,
    open: true,
  },
};
